<template>
  <div
    class="listwrap wrapper"
    :id="config.wrapper"
    :class="{'refreshing':isRefresh || !config.refresh}"
    @touchend="listentToTouchEnd"
  >
    <ul class="scroller">
      <section class="pull-el pull-refresh" v-show="config.refresh">
        <div class="arrow-wrapper" v-show="pulldown">
          <span v-bind:class="['scroll-icon-arrow', ricon ? 'flip-up' : 'flip-down']"></span>
        </div>
        <div class="loading-wrapper" v-show="refreshicon">
          <span class="icon-loading"></span>
        </div>
      </section>

      <slot name="scrollContent"></slot>
      <section class="pull-el pull-down" v-show="config.loadmore && loadmore">
        <load-more :show-loading="showmore"></load-more>
        <!-- <div class="loading-wrapper" v-show="showmore">
          <span class="icon-loading"></span>
        </div>-->
      </section>
    </ul>
  </div>
</template>
<style>
</style>
<script type="text/babel">
// import Vue from "vue";
import { LoadMore } from "vux";
import IScroll from "../../../../libs/iscroll-probe_my.js";

export default {
  name: "listview",
  data() {
    return {
      refreshicon: false, //是否显示刷新图标
      showrefresh: false, //是否显示刷新
      pulldown: false, //是否显示刷新文字
      showmore: true, //是否显示加载更多
      loadmore: true, //是否显示加载更多容器，默认有加载更多
      hasdata: true, //是否有数据
      ricon: false, //是否在可刷新状态
      micon: false,
      isRefresh: false, //是否刷新中,
      isLoadMore: false //是否加载更多中,
    };
  },
  props: ["config"],
  components: {
    LoadMore
  },
  methods: {
    init() {
      this.initScroller();
      this.listentToScroll();
      this.listentToScrollEnd();
      this.listentToTouchEnd();

      this.$emit("init", this.myScroll); //初始化完成
    },

    initScroller() {
      this.myScroll = new IScroll("#" + this.config.wrapper, {
        probeType: 2,
        click: false,
        tap: true,
        disableMouse: true,
        disablePointer: true,
        bounce: false,
        vScrollbar: false,
        mutationObserver: this.config.mutationObserver,
        eventPassthrough: "horizontal" //设置这个属性为true时iScroll区域只将影响横向滚动，纵向滚动将滚动整个页面。为horizontal则相反
      });
    },

    listentToScroll() {
      //监听滑动
      let scroller = this.myScroll;
      scroller.on("scroll", () => {
        if (this.isLoadMore || this.isRefresh) {
          //数据加载中状态，不修改任何状态
          return;
        }
        //下拉显示刷新
        let distance = 45;

        if (scroller.y >= -50) {
          //提前显示下拉刷新
          this.ricon = scroller.y > distance;
          this.pulldown = true;
          this.refreshicon = false;
          this.micon = false;
        } else if (
          Math.abs(scroller.y) >= Math.abs(scroller.maxScrollY) - distance &&
          this.loadmore &&
          this.config.loadmore
        ) {
          //加载更多
          this.micon = true;
          this.ricon = false;
        } else {
          this.micon = false;
          this.ricon = false;
        }

        // 当高度与iscroll的滑动距离不相等的时候，刷新iscroll
        if (
          scroller.scroller.offsetHeight !=
          scroller.wrapperHeight + Math.abs(scroller.maxScrollY)
        ) {
          scroller.refresh();
        }
      });
    },

    listentToTouchEnd() {
      //因为修改iscroll 实时触发scroll、scrollEnd事件，所以在下拉刷新改用touchend事件
      if (this.ricon) {
        //在可以刷新状态
        this.refreshicon = true;

        if (this.isRefresh) {
          //数据加载中状态，不做任何操作
          return;
        }
        this.isRefresh = true; //数据加载中状态

        // 修改为刷新中状态
        this.ricon = false;
        this.pulldown = false;
        this.refreshicon = true;
        // 刷新中事件
        this.$emit("refresh");
        setTimeout(() => {
          this.myScroll.refresh();
        }, 200);
      }
    },

    listentToScrollEnd() {
      //监听滑动结束
      let scroller = this.myScroll;
      scroller.on("scrollEnd", () => {
        // console.info("test-", this.isLoadMore, this.micon);
        if (this.isLoadMore || !this.micon) {
          //数据加载中状态，不继续加载数据，或者不在可加载更多数据状态
          return;
        }

        this.isLoadMore = true;
        this.micon = false;
        this.$emit("loadmore", this.config.wrapper);
        setTimeout(() => {
          scroller.refresh();
        }, 200);
      });
    },

    refresh() {
      // console.info('refresh----',this.myScroll)
      //刷新iscroll
      let scroller = this.myScroll;
      if (!scroller) {
        return;
      }

      setTimeout(() => {
        // 刷新iscroll
        scroller.refresh();

        this.showmore = !(
          scroller.scroller.clientHeight < scroller.wrapper.clientHeight
        );

        setTimeout(() => {
          //延迟刷新状态
          // 重置状态
          this.refreshicon = false;
          this.showrefresh = false;
          this.pulldown = false;

          this.ricon = false;
          this.micon = false;

          this.isRefresh = false;
          this.isLoadMore = false;
        }, 100);
      }, 200);
    }
  },

  mounted() {
    this.init();
  }
};
</script>
<style lang="less">
.wrapper {
  position: absolute;
  transition: top 0.2s;
  top: -40px;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  background-color: #fff;
  touch-action: none;
  &.refreshing {
    top: 0;
  }
  .scroller {
    min-height: 100%;
  }
  .scroll-wrapper {
    position: inherit;
    min-height: 100%;
  }
}

.pull-el {
  height: 40px;
}

.arrow-wrapper {
  width: 25px;
  height: 40px;
  position: relative;
  z-index: 1;
  margin: auto;
  line-height: 40px;
  &:after {
    content: "";
    width: 25px;
    height: 25px;
    position: absolute;
    z-index: 1;
    border: 2px solid #d1d1d1;
    border-radius: 25px;
    top: 50%;
    transform: translateY(-50%);
    box-sizing: border-box;
  }
  .scroll-icon-arrow {
    position: relative;
    z-index: 99;
    display: block;
    background-image: url("");
    background-size: pxToRem(23px) pxToRem(26px);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: 25px;
    height: 40px;
    margin: auto;
    line-height: 40px;
  }
}

.loading-wrapper {
  width: 25px;
  height: 40px;
  position: relative;
  z-index: 1;
  margin: auto;
  line-height: 40px;
  &:after {
    content: "";
    width: 25px;
    height: 25px;
    position: absolute;
    z-index: 1;
    border: 1px solid #d1d1d1;
    border-radius: 25px;
    top: 50%;
    transform: translateY(-50%);
    box-sizing: border-box;
  }
  .icon-loading {
    position: relative;
    z-index: 1;
    display: block;
    background-image: url("");
    background-size: pxToRem(42px) pxToRem(42px);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    animation: rotating 0.8s linear infinite;
    animation-fill-mode: both;
    -webkit-animation: rotating 0.8s linear infinite;
    -webkit-animation-fill-mode: both;
    width: 25px;
    height: 40px;
    margin: auto;
    line-height: 40px;
  }
}

.default-ctn {
  font-size: 17px;
  color: #333;
  padding-top: 20%;
  text-align: center;
}

.flip-up {
  animation: flipUp 0.3s 1;
  animation-fill-mode: both;
  -webkit-animation: flipUp 0.3s 1;
  -webkit-animation-fill-mode: both; // transform:rotate(0);
}

.post-cont,
.rm-list {
  img {
    max-width: 100%;
  }
}

@-webkit-keyframes flipUp {
  0% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
  100% {
    transform: rotate(540deg);
    -webkit-transform: rotate(540deg);
  }
}

@keyframes flipUp {
  0% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
  100% {
    transform: rotate(540deg);
    -webkit-transform: rotate(540deg);
  }
}

.flip-down {
  animation: flipDown 0.3s 1;
  animation-fill-mode: both;
  -webkit-animation: flipDown 0.3s 1;
  -webkit-animation-fill-mode: both; // transform:rotate(0);
}

@-webkit-keyframes flipDown {
  0% {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}

@keyframes flipDown {
  0% {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes rotating {
  0% {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
    -webkit-transform: rotateY(360deg);
  }
}

@keyframes rotating {
  0% {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
    -webkit-transform: rotateY(360deg);
  }
}
</style>

